<template>
	<view class="content">
		<uni-loding :loading='loading'></uni-loding>
		<view class="main-box">
			<view class="parse-box">
				<!-- https://car.jokerfan.com/files/img/2025/08/06/1754461288364575.gif  等待图 -->
				<u-parse v-if="info" :content="info"
					loadingImg="https://car.jokerfan.com/files/img/2025/08/06/1754461288364575.gif"
					:imageProp="{mode:'widthFix'}"></u-parse>
			</view>
			<view class="btn-box">
				<view class="btn" @click="show = true">预约登记</view>
			</view>
			<u-popup :show="show" mode="bottom" @close="show = false" :round="10">
				<view class="form-box">
					<view class="form-list-box">
						<view class="form-title">联系人</view>
						<view class="form-input-box">
							<u--input placeholder="请输入联系人" prefixIcon="account-fill"
								prefixIconStyle="font-size: 22px;color: #909399" v-model="formData.name"></u--input>
						</view>
					</view>
					<view class="form-list-box">
						<view class="form-title">联系电话</view>
						<view class="form-input-box">
							<u--input placeholder="请输入电话号码" prefixIcon="phone-fill"
								prefixIconStyle="font-size: 22px;color: #909399" v-model="formData.phone"></u--input>
						</view>
					</view>
					<view class="form-list-box">
						<view class="form-title">心动车型</view>
						<view class="form-input-box input-line-box">
							<view class="flex-1" @click="seriesClick()">
								<u--input placeholder="车系" prefixIcon="arrow-down"
									prefixIconStyle="font-size: 22px;color: #909399" readonly
									v-model="seriesVal"></u--input>
							</view>
							<view class="flex-1" @click="carClick()">
								<u--input placeholder="车型" prefixIcon="arrow-down"
									prefixIconStyle="font-size: 22px;color: #909399" readonly
									v-model="carVal"></u--input>
							</view>
						</view>
					</view>
					<view class="form-list-box">
						<view class="form-title">需求简述</view>
						<view class="form-input-box">
							<u--textarea placeholder="请输入需求内容" v-model="formData.content"></u--textarea>
						</view>
					</view>
					<view class="form-btn-box" @click="btn">预约</view>
				</view>
			</u-popup>
			<u-picker :show="seriesShow" keyName="title" ref="seriesPicker" :columns="seriesList"
				@confirm="seriesConfirm" @cancel="seriesShow = false"></u-picker>
			<u-picker :show="carShow" keyName="title" ref="carPicker" :columns="carList" @confirm="carConfirm"
				@cancel="carShow = false"></u-picker>
		</view>
	</view>
</template>

<script>
	// import richTextUtil from '@/utils/richTextUtil.js';
	// import uParse from '@/components/u-parse/u-parse.vue';
	export default {
		// components: {
		// 	uParse
		// },
		data() {
			return {
				info: '',
				loading: true,
				show: false,
				formData: {
					"name": "",
					"phone": "",
					"series_id": '',
					"model_id": '',
					"content": ""
				},
				seriesVal: '',
				carVal: '',
				seriesShow: false,
				carShow: false,
				seriesList: [],
				carList: []

			}
		},
		onLoad(pramas) {
			this.init(pramas.sn);
			uni.setNavigationBarTitle({
				title: pramas.name
			});
			this.hasSeries()
		},
		methods: {
			seriesClick() {
				this.seriesShow = true;
			},
			seriesConfirm(e) {
				this.seriesVal = e.value[0].title;
				this.carVal = '';
				this.formData.model_id = '';
				this.formData.series_id = e.value[0].id;
				this.hasCarList(e.value[0].id);
				this.seriesShow = false;
			},

			carClick() {
				if (this.seriesVal == '') {
					uni.showToast({
						title: '请先选择车系',
						icon: 'none'
					})
				} else {
					this.carShow = true;
				}
			},
			carConfirm(e) {
				this.carVal = e.value[0].title;
				this.formData.model_id = e.value[0].id;
				this.carShow = false;
			},
			init(sn) {
				this.$func.request('/car/detail/' + sn).then(res => {
					this.info = res.data.data.content
					this.loading = false
				}).catch(error => {
					this.loading = false
				})
			},
			hasSeries() {
				this.$func.request('/car/series').then(res => {
					this.seriesList = [res.data.datas];
				})
			},
			hasCarList(id) {
				this.$func.request('/car/series/' + id).then(res => {
					this.carList = [res.data.data];
				})
			},
			btn() {
				if (this.formData.phone == '') {
					uni.showToast({
						title: '请填写联系电话',
						icon: 'none'
					})
					return false
				}
				if (this.formData.series_id == '') {
					uni.showToast({
						title: '请选择车系',
						icon: 'none'
					})
					return false
				}
				if (this.formData.model_id == '') {
					uni.showToast({
						title: '请选择车型',
						icon: 'none'
					})
					return false
				}

				// if (this.formData.content == '' || this.formData.content == ' ') {
				// 	uni.showToast({
				// 		title: '请填写需求简述',
				// 		icon: 'none'
				// 	})
				// 	return false
				// }

				uni.showLoading({
					title: '预约提交...',
				});



				this.$func.request('/car/book', this.formData, 'POST').then(res => {
					uni.hideLoading()
					if (res.status_code == 200) {
						uni.showModal({
							title: '提示',
							content: '提交成功',
							showCancel: false, // 不显示取消按钮
							success() {
								// uni.reLaunch({
								// 	url: '/pages/index/user'
								// })
							}
						});
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
					this.show = false;
				}).catch(error => {
					uni.hideLoading()
					uni.showToast({
						title: error.message,
						icon: 'none'
					})
				})

			},
		}
	}
</script>

<style scoped>
	.main-box {
		height: 100vh;
		padding-bottom: 150rpx;
		box-sizing: border-box;
	}

	.img {
		width: 100%;
	}

	.btn-box {
		height: 150rpx;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 99;
		padding: 25rpx 80rpx;
		box-sizing: border-box;
	}

	.btn {
		color: #fff;
		background: linear-gradient(90deg, #216AFB, #5D9DFC);
		height: 100rpx;
		line-height: 100rpx;
		font-size: 36rpx;
		width: 100%;
		border-radius: 20rpx;
		text-align: center;
		font-weight: 600;
	}

	.form-box {
		padding: 40rpx;
		box-sizing: border-box;
	}

	.form-title {
		margin: 20rpx 0 20rpx;
	}

	.form-btn-box {
		color: #fff;
		text-align: center;
		background: linear-gradient(180deg, #4566E8, #4163EB);
		box-shadow: rgba(0, 0, 0, .2) 0 5rpx 10rpx 5rpx;
		border-radius: 10rpx;
		padding: 30rpx 0;
		margin-top: 50rpx;
	}

	.parse-box {
		padding-bottom: 150rpx;
		overflow: auto;
		box-sizing: border-box;
	}

	>>>.wxParse {
		padding: 0 !important;
	}

	>>>.wxParse .img {
		vertical-align: top !important;
	}

	.input-line-box {
		display: flex;
		justify-content: space-between;
	}

	.flex-1 {
		width: 48%;
	}
</style>